<template>
	<view class="content" v-if="orderInfo">
		<scroll-view :scroll-y="true" style="height: 90vh;">
		<!-- 	<view class="address gui-flex gui-align-items-center gui-space-between" @tap="Goaddress">
				<block v-if="addressInfo.xiang">
					<view class="address-content" style="color: #333;">
						{{ addressInfo.xiang }}
					</view>
					<view class="address-icon">
						<u-icon name="arrow-right" size="22rpx" color="#999"></u-icon>
					</view>
				</block>
				<block v-else>
					<view class="address-content">
						请选择收货地址
					</view>
					<view class="address-icon">
						<u-icon name="arrow-right" size="22rpx" color="#999"></u-icon>
					</view>
				</block>
			</view> -->
			<view class="shop">
				<view class="shop-item gui-flex" v-for="(item,i) in orderInfo.orderli" :key="i">
					<view class="shop-img gui-flex gui-align-items-center gui-justify-content-center">
						<image style="border-radius: 16rpx;" :src="tool.img(item.guiimage)" mode="aspectFill"></image>
					</view>
					<view class="shop-content">
						<view class="shop-name" style="margin-left: 15rpx;">
							{{ item.name }}
						</view>
						<view class="shop-idcr" style="margin-left: 15rpx;">
							{{ item.guiname }}
						</view>
						<view class="shop-footer">
							<view class="shop-price" style="margin-left: 15rpx;">
								￥{{ item.price }}
							</view>
							<view class="shop-num">
								x{{ item.num }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-item">
				<view class="order">
					<view class="order-left">
						姓名
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<input type="text" style="text-align: right;" placeholder="请填写姓名" v-model="name" />
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						电话
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<input type="number" maxlength="11" style="text-align: right;" placeholder="请填写电话" v-model="tel" />
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						省市区
					</view>
					<view class="order-right neworder" style="color: #868686;" @click="ssq">
						<text style="font-size: 32rpx;"
												:style="address =='请选择省市区'?'color:#818181':''">{{ address }}</text>
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						详细地址
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<input type="text" style="text-align: right;" placeholder="请填写详细地址" v-model="xiang" />
					</view>
				</view>
				<view class="order">
					<view class="order-left">
						备注
					</view>
					<view class="order-right neworder" style="color: #868686;">
						<input type="text" style="text-align: right;" placeholder="请填写备注" v-model="remark" />
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer-submit">
			<view class="submit-price">
				合计：￥<text v-if="total">{{ total }}</text>
			</view>
			<view class="submit-btn" @tap="OrderPay">
				提交订单
			</view>		<gui-area-picker ref="graceAddressPicker1" @confirm="confirm1" :level="3" cancelText="关闭"></gui-area-picker>
		</view>
	</view>
</template>

<script>
	import tool from '../../utils/tool.js'
	export default {
		computed: {
			total() {
				let num = 0
				num = Number(this.orderInfo.price) + Number(this.yunfei) - Number(this.youprice)
				return num.toFixed(2)
			}
		},
		data() {
			return {
				name:'',
				xiang:'',
				address:'请选择省市区',
				sheng:'',
				shi:'',
				qu:'',
				tool: tool,
				addressInfo: '', //地址信息
				order_id: '', //订单ID
				orderInfo: '', //订单信息
				couponShow: false,
				coupontext: '暂无可使用的优惠券',
				youprice: 0,
				couponli_id: '',
				peiType: [],
				peiIndex: -1,
				peiInfo: '',
				yunfei: 0,
				tel: '',
				remark: '',
				orderPayInfo: {
					payAppId: "", //公众号ID，
					payTimeStamp: "", //时间戳，自1970年以来的秒数    
					payNonceStr: "", //随机串    
					payPackage: "",
					paySignType: "", //微信签名方式：    
					paySign: "", //微信签名									
				}
			}
		},
		onLoad(options) {
			this.order_id = options.id
			this.GetPeiType()
			this.GetAddress()
			this.GetoderInfo()
		},
		onShow() {
			uni.$on('address', (res => {
				this.addressInfo = res
			}))
		},
		methods: {
			ssq() {
				console.log('123')
				this.open1()
			},
			open1: function() {
				this.$refs.graceAddressPicker1.open();
			},
			confirm1: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.address = e.names[0] + '-' + e.names[1] + '-' + e.names[2];
				this.sheng = e.names[0]
				this.shi = e.names[1]
				this.qu = e.names[2]
			},
			orderPrice() { //查询配送金额
				this.$http.Post('order/orderPrice', {
					order_id: this.order_id,
					pei: this.peiType[this.peiIndex].type
				}, (result) => {
					this.yunfei = result.data.peiMoney
				})
			},
			peichange(e) { //配送类型选择
				this.peiIndex = e.detail.value
				console.log(this.peiType[this.peiIndex].type)
				this.orderPrice()
			},
			Goaddress() { //选择收货地址
				uni.navigateTo({
					url: '/pages/address/index'
				})
			},
			GetPeiType() { //获取配送方式 
				this.$http.Post('zter/peitype', {

				}, (result) => {
					console.log(result.data, '?')
					this.peiInfo = result.data
					let arr = []
					arr = result.data.typedataArr
					arr.filter((item, i) => {
						if (item == 'ziti') {
							this.peiType.push({
								"name": "自提",
								"type": "ziti"
							})
						}
						if (item == 'pei') {
							this.peiType.push({
								"name": "商家配送",
								"type": "pei"
							})
						}
						if (item == 'kuai') {
							this.peiType.push({
								"name": "快递",
								"type": "kuai"
							})
						}
					})
					console.log(this.peiType, '?????')
				})
			},
			radioChange(e) {
				this.youprice = e.youprice
				this.couponli_id = e.id
				this.coupontext = e.youprice
			},
			OrderPay() { //订单支付
			if(!this.tel){
				uni.showToast({
					title:'请填写手机号',
					icon:'error'
				})
				return
			}
			if(!this.name){
				uni.showToast({
					title:'请填写姓名',
					icon:'error'
				})
				return
			}
			if(!this.xiang){
				uni.showToast({
					title:'请填写详细地址',
					icon:'error'
				})
				return
			}
			if(this.address == '请选择省市区'){
				uni.showToast({
					title:'请选择省市区',
					icon:'error'
				})
				return
			}
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('order/orderPay', {
					order_id: this.order_id,
					// address_id: this.addressInfo.id,
					pei: 'kuai',
					couponli_id: this.couponli_id,
					remark: this.remark,
					tel: this.tel,
					name:this.name,
					xiang:this.xiang,
					sheng:this.sheng,
					shi:this.shi,
					qu:this.qu
				}, (result) => {
					uni.hideLoading()
					let paymentInfo = result.data
					console.log(paymentInfo, '?')
					if (paymentInfo.err_code_des == '201 商户订单号重复') {
						uni.showToast({
							title: '请勿重复下单',
							icon: 'error'
						})
					} else {
						uni.redirectTo({
							url: '/pages/buy/pay?url=' + paymentInfo.code_url + '&order_id=' + this
								.order_id
						})
					}
				})
			},
			GetoderInfo() { //获取订单信息 
				this.$http.Post('order/orderInfo', {
					order_id: this.order_id
				}, (result) => {
					this.orderInfo = result.data
					if (this.orderInfo.yunfei == null) {
						this.orderInfo.yunfei = 0
					}
					if (this.orderInfo.couponli.length != 0) {
						this.coupontext = '请选择优惠券'
					}
				})
			},
			GetAddress() { //获取默认地址
				this.$http.Post('address/mo', {}, (result) => {
					this.addressInfo = result.data
					console.log(this.addressInfo, '???')
				})
			},
			couponclose() {
				this.couponShow = false
			},
			couponopen() {
				this.couponShow = true
			},
		}
	}
</script>

<style>
	.content {
		position: relative;
	}

	.address {
		padding: 0 35rpx;
		height: 100rpx;
		background-color: #fff;
	}

	.address-content {
		font-size: 28rpx;
		color: #999;
	}

	.shop {
		margin-top: 20rpx;
	}

	.shop-item {
		background-color: #fff;
		padding: 25rpx 35rpx;
		height: 250rpx;
	}

	.shop-img {
		width: 35%;
		height: 100%;
	}

	.shop-img>image {
		width: 220rpx;
		height: 220rpx;
	}

	.shop-content {
		position: relative;
		width: 65%;
		height: 100%;
		/* padding: 0 25rpx 0 25rpx; */
	}

	.shop-name {
		font-size: 30rpx;
		color: #3c3c3c;
		padding: 20rpx 0;
	}

	.shop-idcr {
		font-size: 26rpx;
		color: #999;
		padding: 15rpx 0;
	}

	.shop-footer {
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.shop-price {
		font-size: 32rpx;
		color: #ff5502;
	}

	.shop-num {
		font-size: 32rpx;
		color: #999;
	}

	.bai {
		width: 100%;
		text-align: right;
	}

	.order-item {
		margin-top: 20rpx;
	}

	.order {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 35rpx 35rpx;
		background-color: #fff;
	}

	.order-left {
		color: #bebebe;
		width: 20%;
	}

	.order-right {
		width: 80%;
		display: flex;
		justify-content: flex-end;
	}

	.neworder {
		font-size: 32rpx;
		color: #ff5502;
	}

	.footer-submit {
		z-index: 9999;
		width: 100%;
		bottom: 0;
		position: fixed;
		background-color: #fff;
		height: 120rpx;
		border-top: 1rpx solid #f4f4f4;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.submit-price {
		font-size: 28rpx;
		color: #ff5502;
		margin-left: 35rpx;
	}

	.submit-btn {
		width: 260rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #ff5502;
		margin-right: 35rpx;
		border-radius: 999rpx;
	}

	.coupon-box {
		width: 100%;
		height: 700rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		position: relative;
	}

	.coupon-title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}

	.coupon-list {
		padding: 25rpx 35rpx;
	}

	.c-list {
		padding: 20rpx 0;
	}

	.coupon-bottom {
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		height: 90rpx;
	}

	.coupon-btn {
		margin: 0 auto;
		width: 90%;
		height: 100%;
		border-radius: 999rpx;
		background-color: #fc6766;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}
</style>
